<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
  <title>第一课</title>
  <style>
  #canvas{
    border:1px solid #aaa;
    display: block;
    margin: 50px auto;
  }
  </style>
</head>
<body>
  
<canvas id="canvas" width="800" height="500">如果不支持，我会显示</canvas>
</body>
<script type="text/javascript">
 
  		var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =800;
			var context = canvas.getContext("2d");
    
			var searchLight={x:400,y:400,radius:80,vx:Math.random()*5+10,vy:Math.random()*5+5};
			
			setInterval(
				function(){
					draw(context);
					update(canvas.width,canvas.height);
				},
				30
			);
			
			function draw(cxt){
				var canvas = cxt.canvas;
				cxt.clearRect(0,0,canvas.width,canvas.height);
				
				cxt.save();
				
				cxt.beginPath();
				cxt.fillStyle="black";
				cxt.fillRect(0,0,canvas.width,canvas.height);
				
				cxt.beginPath();
				cxt.arc(searchLight.x,searchLight.y,searchLight.radius,0,Math.PI*2);
				cxt.fillStyle="#fff";
				cxt.fill();
				cxt.clip();
				
				cxt.font="bold 150px Arial";
				cxt.textAlign="center";
				cxt.textBaseline="middle";
				cxt.fillStyle="#058";
				
				//谷歌浏览器看不见文字？？
				cxt.fillText("你能看见我吗？",0,0);
				cxt.fillText("CAVANS",canvas.width/2,canvas.height/4);
				cxt.fillText("CAVANS",canvas.width/2,canvas.height/2);
				cxt.fillText("CAVANS",canvas.width/2,canvas.height*3/4);
				cxt.fillText("最后的最后！！",0,canvas.height-50);

				cxt.restore();
}
				//移动检测
			function update(canvasWidth,canvasHeight){
				searchLight.x += searchLight.vx;
				searchLight.y +=searchLight.vy;
				
					if(searchLight.x -searchLight.radius<=0){
						searchLight.vx =-searchLight.vx;
						searchLight.x  =searchLight.radius;
					}if(searchLight.x +searchLight.radius>=canvasWidth){
						searchLight.vx =-searchLight.vx;
						searchLight.x  =canvasWidth-searchLight.radius;
					}if(searchLight.y-searchLight.radius<=0){
						searchLight.vy =-searchLight.vy;
						searchLight.y =searchLight.radius;
					}if(searchLight.y +searchLight.radius>=canvasHeight){
						searchLight.vy=-searchLight.vy;
						searchLight.y=canvasHeight-searchLight.radius;
					}
				
				}
				
			
</script>
</html>